<style lang="less">
body,
html {
  height: 100%;
  &::after {
    content: ' ';
    // background: url('http://file.86wa.com/ScreenTheme/2/images/bg.jpg?x-oss-process=image/blur,r_3,s_20')
    //   center center no-repeat;
    // filter: blur(30px);
    // background-size: 100% 100%;
    // background-size: cover;
    background-color: #428bca;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  height: auto;
}
.app {
  height: calc(~'100% - 6rem');
  padding-bottom: 6rem;
}
header {
  height: 7rem;
  padding: 3rem 5rem 0 5rem;
  display: flex;
  .m-qr {
    flex: 2;
    img {
      width: 6rem;
    }
  }
  .m-title {
    flex: 10;
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
  }
  .m-sign {
    flex: 2;
    text-align: center;
    padding: 1rem 0;
    color: #d9d9d9;
    text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);
    // background-color: rgba(255, 255, 255, 0.1);
    em {
      font-size: 1.5rem;
      font-style: normal;
      font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
      //   font-family: Georgia, 'Times New Roman', Times, serif;
      color: #ff4500;
      display: block;
      line-height: 3rem;
    }
  }
  .m-logo {
    flex: 3;
    text-align: right;
  }
}
.m-body {
  padding: 0 5rem 0 5rem;
  height: calc(~'100% - 10rem');
  overflow: hidden;
  //   background-color: rgba(0, 255, 255, 0.1);
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    position: relative;
  }
  @percent: 100 / 11;
  li {
    width: ~'@{percent}%';
    float: left;
    & > div {
      background: rgba(0, 0, 0, 0.2);
      height: 80px;
      margin: 0 1px 1px 0;
      &.selected,
      &:hover {
        background: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
footer {
  height: 6rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
}
</style>
<template>
    <div class="app">
        <header>
            <div class="m-qr">
                <img src="http://file.86wa.com/qr/201712/Weixinwxa3df9d89198b542710052.jpg" alt="">
            </div>
            <div class="m-title">
                <h3>开心大屏幕</h3>
            </div>
            <div class="m-sign">
                <em>15</em>
                <div>人签到</div>
            </div>
            <div class="m-logo">
                <img src="http://file.86wa.com/ScreenTheme/default/images/logo.png" alt="">
            </div>
        </header>
        <section class="m-body">
            <div class="">
                <ul>
                    <li v-for="i in count">
                        <div :class="{'selected':selected === i}">
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <footer>
            <div style="color:rgba(255,255,255,.6);line-height:6rem;text-align:center;">
                &copy;{{code}}
            </div>
            <div style="position:absolute; bottom:0;right:0">
                <img src="https://tool.lu/netcard/" alt="">
            </div>
        </footer>
    </div>
</template>
<script>
export default {
  name: 'Max',
  data() {
    return {
      code: '',
      count: 12 * 7,
      selected: -1
    }
  },
  created() {
    this.code = this.$route.params.code
  },
  mounted() {
    let _this = this
    let lettery = 0
    // let timer = Promise.resolve()
    let timer = setInterval(() => {
      _this.selected = ~~Math.round(Math.random() * _this.count)
      lettery++
      if (lettery > 50) clearInterval(timer)
    }, 88)
  }
}
</script>